<!doctype html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <title>资金流水</title>
    <link href="/static/home/mobile/css/reset_5.css" rel="stylesheet" type="text/css"/>
    <link href="/static/home/mobile/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="/static/home/mobile/css/new_style.css" rel="stylesheet" type="text/css"/>
    <style>
    *{
        margin: 0;
        padding:0;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        -webkit-text-size-adjust:none;
    }
    html{
        font-size:10px;
        background-color: #111;
    }
    body{
        background-color: #111;
        font-size: 1.2em;
        color:#fff;
    }
    .outer{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction:column;
        -webkit-box-orient:vertical;
        box-orient:vertical;
        -webkit-flex-direction:column;
        flex-direction:column;
    }
    .header{
        position: relative;
        height: 37px;
        line-height: 37px;
        border-bottom: 1px solid #333;
        background-color: #000;
        padding:10px 20px 0;
    }

    .header .btn{
        position: absolute;
        right: 0;
        top: 0;
        width: 4em;
        height: 100%;
        text-align: center;
        color: #06c;
        font-size: 1.4rem;
        background-color: #ccc;
    }
    .header .btn:active{
        background-color: #aaa;
        color: #fff;
    }
    .inner{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: #fff;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    .inner .item{
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align:center;
        -webkit-box-align:center;
        box-align:center;
        -webkit-align-items:center;
        align-items:center;
        padding:3.125%;
        border-bottom: 1px solid #ddd;
        color: #333;
        text-decoration: none;
    }
    .inner .item img{
        display: block;
        width: 40px;
        height: 40px;
        border:1px solid #ddd;
    }
    .inner .item h3{
        display: block;
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: 100%;
        max-height: 40px;
        overflow: hidden;
        line-height: 20px;
        margin: 0 10px;
        font-size: 1.2rem;
    }
    .inner .item .date{
        display: block;
        height: 20px;
        line-height: 20px;
        color: #999;
    }
    .opacity{
        -webkit-animation: opacity 0.3s linear;
        animation: opacity 0.3s linear;
    }
    @-webkit-keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }
    @keyframes opacity {
        0% {
            opacity:0;
        }
        100% {
            opacity:1;
        }
    }

    .list-item{
    	font-size: 14px;
    	padding-top:10px;
        min-height:50px;
        border-bottom:1px solid #333;
        width:90%;
        margin-left:5%;
        line-height:20px;
    }
    .list-item-left{
        float:left;
        display:block;
        width:60%;
    }
    .list-item-right{
        float:right;
        display:block;
        width:40%;
        text-align:right;
    }
    .back{
        float: left;
        background: url('/static/home/mobile/images/return.png') no-repeat;
        background-size: 9px 21px;
        margin-top: 5px;
        height:37px;
        width:37px;
    }
    .f75{
    	font-size: 1rem;
    	color:#6d6d6d;
    }
    </style>
    <link rel="stylesheet" href="/static/home/mobile/css/dropload.css">
</head>
<body>
         <div class="site-header header-fixed" style="background-color:#000;color:#fff;">
        <a onclick="history.back()" class="back" style="background:url('/static/home/mobile/login/back.png')no-repeat; background-size:15px 22px;width:15px;height:22px;"></a>
        <div class="tit-name" style="">资金流水
 </div>
    </div>
    <div class="inner" style="margin-top:50px;background: #111;">
        <div class="lists" style="background:#111;">

        </div>
    </div>
</div>
<!-- jQuery1.7以上 或者 Zepto 二选一，不要同时都引用 -->
  <script src="/static/home/mobile/js/jquery.min.js"></script>
<script src="/static/home/mobile/js/dropload.min.js"></script>
<script>


$(function(){
    function time(time) {
    time = time*1000;
    var date = new Date(time + 8 * 3600 * 1000); // 增加8小时
    return date.toJSON().substr(0, 19).replace('T', ' ');
}
    var page=1;
    // 按钮操作
    $('.header .btn').on('click',function(){
        var $this = $(this);
        if(!!$this.hasClass('lock')){
            $this.attr('class','btn unlock');
            $this.text('解锁');
            // 锁定
            dropload.lock();
            $('.dropload-down').hide();
        }else{
            $this.attr('class','btn lock');
            $this.text('锁定');
            // 解锁
            dropload.unlock();
            $('.dropload-down').show();
        }
    });

    // dropload
    var dropload = $('.inner').dropload({
        domUp : {
            domClass   : 'dropload-up',
            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
        },
        domDown : {
            domClass   : 'dropload-down',
            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
            domNoData  : '<div class="dropload-noData">暂无数据</div>'
        },
        loadUpFn : function(me){

                    page=1;
                    $.get('/home/charge/ajax?page='+page, function(res){
                        let str='';
                    	$(".lists").html('');
                        if(res.data.data.length>0){

                          for( let item of res.data.data){
                        
                               str+=`<div class="list-item">
                                               <div class="list-item-right">
                                                   <div>`
                                                        +item.num+`
                                                    </div>
                                                   <div class="f75">`
                                                        +time(item.create_time)+`
                                                   </div>
                                               </div>
                                               <div class="list-item-left">`+item.title+`
                                                    <p class="f75">`+item.remark+`
                                                   </p>
                                               </div>
                                               <div style="clear:both;"></div>
                                        </div>`;
                            };
                            page+=1;
                          
                        }else{
                                                    // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }

                                 setTimeout(function(){
                                      
                                        $('.lists').html(str);
                                        // 每次数据加载完，必须重置
                                        dropload.resetload();
                                    },1000);

                            //  next(lis.join(''), res.data.length > 0 ? true : false);
                    });

/*            $.ajax({
                type: 'GET',
                url: 'json/update.json',
                dataType: 'json',
                success: function(data){
                    var result = '';
                    for(var i = 0; i < data.lists.length; i++){
                        result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
                                        +'<img src="'+data.lists[i].pic+'" alt="">'
                                        +'<h3>'+data.lists[i].title+'</h3>'
                                        +'<span class="date">'+data.lists[i].date+'</span>'
                                    +'</a>';
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        $('.lists').html(result);
                        // 每次数据加载完，必须重置
                        dropload.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    dropload.resetload();
                }
            });*/




        },
        loadDownFn : function(me){

            $.get('/home/charge/ajax?page='+page, function(res){
                        let str='';
                    if(res.data.data.length>0){
                        for( let item of res.data.data){
                               str+=`<div class="list-item">
                                               <div class="list-item-right">
                                                   <div>`
                                                        +item.num+`
                                                    </div>
                                                   <div class="f75">`
                                                        +time(item.create_time)+`
                                                   </div>
                                               </div>
                                               <div class="list-item-left">`+item.title+`
                                                    <p class="f75">`+item.remark+`
                                                   </p>
                                               </div>
                                               <div style="clear:both;"></div>
                                        </div>`;
                        };
                        console.log(3)
                        page+=1;
                    }else{
                        console.log(1)
                        me.lock();
                                            // 无数据
                        me.noData();

                    }

                    console.log(2)
                                    $('.lists').append(str);
                                    // 每次数据加载完，必须重置
                  console.log(me.resetload())
                                   me.resetload();


                      // next(lis.join(''), res.data.length > 0 ? true : false);
                });


/*            $.ajax({
                type: 'GET',
                url: 'json/more.json',
                dataType: 'json',
                success: function(data){
                    var result = '';
                    for(var i = 0; i < data.lists.length; i++){
                        result +=   '<a class="item opacity" href="'+data.lists[i].link+'">'
                                        +'<img src="'+data.lists[i].pic+'" alt="">'
                                        +'<h3>'+data.lists[i].title+'</h3>'
                                        +'<span class="date">'+data.lists[i].date+'</span>'
                                    +'</a>';
                    }
                    // 为了测试，延迟1秒加载
                    console.log(dropload.resetload())
                    setTimeout(function(){
                        $('.lists').append(result);
                        // 每次数据加载完，必须重置
                        dropload.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    //alert('Ajax error!');
                    // 即使加载出错，也得重置
                    dropload.resetload();
                }
            });*/
        }
    });
});
</script>
</body>
</html>